<template>
    <div>
        <group class="weui-cells_form">
            <x-input label-width="6" readonly title="持卡人" disabled :value="cardp">
            </x-input>
            <x-input label-width="6" title='银行卡号' placeholder="输入银行卡号" v-model="cardnum"></x-input>
            <popup-picker title="开户银行" :data="yhanglists" v-model="selecttyh" placeholder="选择开户银行"></popup-picker>
            <popup-picker @on-change="changeshen" ref="pickershen" title="开户银行所在省" :data="slist" v-model="svalue"
                          placeholder="选择开户银行所在地"></popup-picker>
            <popup-picker ref="pickershi" title="开户银行所在市" :data="shilist"
                          v-model="shivalue"
                          placeholder="选择开户银行所在地"></popup-picker>
            <x-input label-width="6" title="手机号码" type="tel" :show-clear="false" :max="13" readonly
                     :value="mobile|hidephone">
                <x-button slot="right" @click.native="sendmsg" :disabled="sending" type="primary" :text="countTime"
                          mini>
                </x-button>
            </x-input>
            <x-input label-width="6" title='验证码' placeholder="清输入验证码" v-model="yzm"></x-input>
        </group>
        <group>
            <x-button type="primary" @click.native="sendfn">立即验证</x-button>
        </group>
    </div>
</template>

<script>
    import {getMytoken} from '../../../service/common';
    import {getProvenceR, getShiR, getyhlistR, sendMsgR, addCardR} from '../../../service/my';
    import {isphone} from '../../../uitls/common';
    import {Countdown} from '../../../uitls/timer';
    import {concat, clone, find, propEq} from 'ramda';
    import {XInput, Group, XButton, Cell, PopupPicker} from 'vux';
    import store2 from 'store2';
    export default {
        components: {XInput, Group, XButton, Cell, PopupPicker},
        data() {
            return {
                cardp: '',
                cardnum: '',
                selecttyh: ['中国工商银行'],
                yhanglists: [],
                svalue: ['安徽'],
                shivalue: ['安庆'],
                slist: [],
                shilist: [],
                yzm: '',
                sending: false,
                countTime: '获取验证码',
                mobile: '',
                RandomGuid: '',
                yhdataarr: [],
                cityarr: []
            }
        },
        created() {
            this.getyhlists();
            this.getyhlist();
            this.init();
        },
        filters: {
            hidephone(val){
                return val.substr(0, 3) + '****' + val.substr(7, 11);
            }
        },
        computed: {},
        methods: {
            async init(){
                const {realityName, Mobile}=await store2('userInfo');
                this.cardp = realityName;
                this.mobile = Mobile;
            },
            async getyhlist(){
                const {data} =await getyhlistR();
                if(data && data.code === 0) {
                    let listone = [];
                    data.data.map((e, i)=> {
                        listone.push(e.Name);
                    });
                    this.yhanglists = [listone];
                    this.yhdataarr = data.data;
                }
            },
            async getyhlists(){
                const {data}=await getProvenceR();
                if(data && data.code === 0) {
                    let listone = [];
                    JSON.parse(data.data).map((e, i)=> {
                        listone.push(e.Name);
                    });
                    this.slist = [listone];
                    this.getshi(1);
                }
            },
            async changeshen(shen){
                const index = this.slist[0].indexOf(shen[0]) + 1;
                if(index > 0) {
                    this.getshi(index);
                }
            },
            async getshi(id, datalist){
                const {data}= await getShiR(id);
                if(data && data.code === 0) {
                    let listone = [];
                    JSON.parse(data.data).map((e, i)=> {
                        listone.push(e.Name);
                        this.shilist = [listone];
                        this.shivalue = [this.shilist[0][0]];
                    });
                    this.cityarr = JSON.parse(data.data);
                }
            },
            async sendmsg(){
                const {mobile}=this;
                const {token}=await getMytoken();
                this.countdown();
                const {data}=await sendMsgR({TypeID: 5, UserIDGuid: token, Mobile: mobile});
                if(data && data.code === 0) {
                    this.RandomGuid = data.data;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            check(bankno) {
                if(bankno == "") {
                    this.$vux.toast.text('请填写银行卡号');
                    return false;
                }
                if(bankno.length < 16 || bankno.length > 19) {
                    this.$vux.toast.text('银行卡号长度必须在16到19之间');
                    return false;
                }
                var num = /^\d*$/; //全数字
                if(!num.exec(bankno)) {
                    this.$vux.toast.text('银行卡号必须全为数字');
                    return false;
                }
                return true;
            },
            countdown(){
                this.sending = true;
                let countdowns = new Countdown(59000, (data, isend)=> {
                    if(isend) {
                        this.sending = false;
                        this.countTime = `获取验证码`;
                    }
                    else {
                        this.countTime = `${data[0]}秒后获取`;
                    }
                }, 0);
                countdowns.start();
            },
            async sendfn(){
                const {RandomGuid, mobile, cardnum, cardp, selecttyh, cityarr, shivalue, yhdataarr, yzm}=this;
                const {token}=await getMytoken();
                if(!this.check(cardnum)) {
                    return;
                }
                if(RandomGuid === '') {
                    this.$vux.toast.text('请发送短信验证码');
                    return;
                }
                const sendata = {
                    Mobile: mobile,
                    ValidCode: yzm,
                    RandomGuid,
                    UserIDGuid: token,
                    CardNumber: cardnum,
                    RealityName: cardp,
                    CityID: find(propEq('Name', shivalue[0]))(cityarr).ID,
                    BankID: find(propEq('Name', selecttyh[0]))(yhdataarr).ID
                };
                const {data}=await addCardR(sendata);
                if(data && data.code === 0) {
                    this.$router.replace('/my/center/blankcards');
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../../app";

    .item () {
        height: 16px;
        box-sizing: border-box;
        border-bottom: 1px solid @color12;
        padding: 0 6px;
        background: #fff;
        display: flex;
        align-items: center;
        &:last-child {
            border: none;
        }
        .ranknum {
            border-radius: 50%;
            background: #f3f3f3;
            font-size: @fz26;
            color: @color2;
            width: 38px;
            .setnormalcss(38px);
            box-shadow: 0 2px 1px #b2b2b2;
            font-weight: bolder;
            &.r {
                width: 37px;
                height: 52px;
            }

            &.r0 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/6171212160543.png) no-repeat center;
                background-size: contain;
            }
            &.r1 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/6171212160544.png) no-repeat center;
                background-size: contain;
            }
            &.r2 {
                background: url(//common-1253410441.file.myqcloud.com/activityimg/6171212160545.png) no-repeat center;
                background-size: contain;
            }
        }
        .imghead {
            width: 88px;
            height: 88px;
            margin-right: 30px;
            position: relative;
            i {
                position: absolute;
                background: @color22;
                color: #fff;
                width: 30px;
                font-size: @fz24;
                .setnormalcss(30px);
                border-radius: 50%;
                right: -10px;
                top: 0;
                display: block;
            }
            img {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                box-sizing: border-box;
                border: 2px solid #bebfbf;
            }
        }
        .middlename {
            flex: 1;
            display: flex;
            align-items: center;
            strong {
                font-size: @fz32;
                font-weight: bolder;
            }
            em {
                border: 1px solid @color22;
                border-radius: 32px;
                display: inline-block;
                .setnormalcss(32px);
                color: @color22;
                font-size: @fz24;
                width: 16px;
                margin-left: 10px;
            }
        }
        .rednum {
            display: flex;
            flex-direction: column;
            text-align: center;
            strong {
                font-size: @fz48;
                color: @color22;
                line-height: 1;
                font-weight: bolder;
            }
            b {
                line-height: 1;
                font-size: @fz24;
                color: @color3;
            }
        }
    }

    .attentiongod {
        height: 100%;
    }

    .listcon {
        li {
            .item();
        }
    }
</style>